<template>
  <div class="addsports">
    <div class="titleImg"><img src="~assets/sports/ridingTitle.png" alt=""></div>
    <div class="title">{{pageTitle}}</div>

    <div style="text-align:center;height:40px;line-height:35px;font-size:12px;color:gray;">平均时长相等时，以账户创建优先顺序</div>
    <div class="details_sticky">
      <sticky :check-sticky-support="false">
        <tab :line-width=2 custom-bar-width="80%" v-model="index">
          <tab-item v-for="(item, i) in content_list" :key="i" :selected="selected_item === item">
            <span @click="selectedTab(i)" style="display:block;width:100%;height: 100%;">{{item}}</span>
          </tab-item>
        </tab>
      </sticky>
    </div>

    <div class="userList" v-show="index == 0">
      <div class="rankingTitle">
        <span>排名</span>
        <span>姓名</span>
        <span>平均时长</span>
      </div>
      <ul class="row">
        <li v-for="(item,i) in rankingByUser">
          <span v-if="i == 0 || i == 1 || i == 2" style="color:green;font-weight: bolder;font-size:20px;">{{i+1}}</span>
          <span v-else>{{i+1}}</span>
          <!-- 姓名 -->
          <span>{{item[1]}}</span>
          <!-- 时长 -->
          <span>{{item[2]}} min</span>
        </li>
      </ul>
    </div>
    <div class="departmentList" v-show="index == 1">
      <div class="rankingTitle">
        <span>排名</span>
        <span>部门名称</span>
        <span>平均时长</span>
      </div>
      <ul class="row">
        <li v-for="(item,i) in rankingByDepartment">
          <span v-if="i == 0 || i == 1 || i == 2" style="color:green;font-weight: bolder;font-size:20px;">{{i+1}}</span>
          <span v-else>{{i+1}}</span>
          <!-- 部门名称 -->
          <span>{{item[1]}}</span>
          <!-- 时长 -->
          <span>{{item[2]}} min</span>
        </li>
      </ul>
    </div>

    <toast v-model="showToast" type="warn" position="default" :time="2000">{{showToastText}}</toast>
  </div>
</template>

<script>
import { RequestUrl } from "src/common/url";
import Validation from "src/common/util/validation";
import { Mutations, RouteUrl, StrLenth } from "src/common/const";
import { Flow, FlowState, XInput, FlowLine, XButton, Toast, Sticky, Tab, TabItem } from "vux";
export default {
  components: { Flow, FlowState, FlowLine, XInput, XButton, Toast, Sticky, Tab, TabItem },
  data() {
    return {
      pageTitle: "运动排行榜",
      StrLenth: {}, //字符长度常量
      showToast: false, //提示信息
      showToastText: "", //提示信息
      //选项卡列表
      index: 0,
      content_list: ["个人排行", "团队排行"],
      selected_item: "个人排行",

      rankingByUser: [],//个人
      rankingByDepartment: [],//部门
    }
  },
  methods: {

    //选择标签自动定位内容
    selectedTab(item_index) {

      //切换选项
      this.index = item_index;
    },

    //查询排行榜
    initPageData() {
      let _this = this;
      _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, true);
      _this.$http.post(RequestUrl.GET_SPORT_RANKING_LIST).then(function (res) {
        _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, false);
        if (res.state != 0) {
          _this.showToastText = res.result;
          _this.showToast = true;
          return;
        }
        // alert(JSON.stringify(res.result));
        _this.rankingByUser = res.result.rankingByUser;
        _this.rankingByDepartment = res.result.rankingByDepartment;
      });
    }
  },
  mounted() {
    document.title = this.pageTitle;
    this.StrLenth = StrLenth; //字符长度常量
    this.$init.subPageInit(this);
    this.initPageData();
  }
}
</script>

<style lang="scss" scoped>
.addsports {
  width: 90%;
  margin: 0px auto;
  .titleImg {
    padding-top: 20px;
    margin: 0px auto;
    text-align: center;
    img {
      width: 40px;
      height: 40px;
    }
  }

  .title {
    font-size: 20px;
    text-align: center;
    margin: 0px auto;
    color: #67a926;
    margin-bottom: 5px;
  }

  .details_sticky {
    height: 44px;
  }

  .userList,
  .departmentList {
    width: 90%;
    margin: 10px auto;
    // color: gray;

    .rankingTitle {
      height: 60px;
      line-height: 50px;

      span {
        display: block;
        float: left;
        width: 33%;
        height: 100%;
        text-align: center;
      }
    }
    .row {
      font-size: 18px;
      li {
        height: 50px;
        list-style: none;
        span {
          display: block;
          float: left;
          width: 33%;
          height: 100%;
          text-align: center;
        }
      }
    }
  }
}
</style>

